{% extends "base.html" %}

{% block title %}文章管理 - 我的博客{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <h1 class="text-2xl font-bold text-gray-800">文章管理</h1>
    <a href="{{ url_for('new_post') }}" 
       class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        新建文章
    </a>
</div>

{% if posts %}
<div class="bg-white rounded-lg shadow-sm">
    <table class="min-w-full">
        <thead>
            <tr class="border-b">
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    标题
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    标签
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    创建时间
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作
                </th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            {% for post in posts %}
            <tr>
                <td class="px-6 py-4">
                    <div class="text-sm font-medium text-gray-900">
                        {{ post.title }}
                    </div>
                </td>
                <td class="px-6 py-4">
                    <div class="flex flex-wrap gap-1">
                        {% for tag in post.tags %}
                        <span class="bg-gray-100 px-2 py-1 rounded text-xs">{{ tag }}</span>
                        {% endfor %}
                    </div>
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">
                    {{ post.created_at[:10] }}
                </td>
                <td class="px-6 py-4 text-sm font-medium">
                    <div class="flex space-x-2">
                        <a href="{{ url_for('edit_post', post_id=post.id) }}" 
                           class="text-blue-600 hover:text-blue-900">
                            编辑
                        </a>
                        <button onclick="deletePost({{ post.id }}, '{{ post.title }}')" 
                                class="text-red-600 hover:text-red-900">
                            删除
                        </button>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center py-12">
    <div class="text-gray-400 text-lg mb-4">暂无文章</div>
    <a href="{{ url_for('new_post') }}" class="text-blue-600 hover:text-blue-800">
        开始写第一篇文章 →
    </a>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
function deletePost(id, title) {
    if (confirm(`确定要删除文章 "${title}" 吗？此操作不可恢复。`)) {
        fetch(`/api/posts/${id}`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        });
    }
}
</script>
{% endblock %}
